<template>
	<div class="movie-detail">
		<div class="m-detail">
			<div class="mask"></div>
			<div class="m-bg" :style="{'background-image': 'url('+$options.filters.src(movieDetail.img)+')'}"></div>
			<div class="detail">
				<div class="poster">
					<img :src="$options.filters.src(movieDetail.img)">
				</div>
				<div class="content">
					<div class="title ellipsis">{{movieDetail.nm}}</div>
					<div class="pubilc ellipsis">{{movieDetail.enm}}</div>
					<div class="score ellipsis">
						<span>{{movieDetail.sc}}</span>
						<span class="snum">({{movieDetail.snum | formatNumber}})</span>
					</div>
					<div class="type ellipsis">
						<span>{{movieDetail.cat}}</span>
						<div class="type-img">
							<span class="icon-bg imax"></span>
						</div>
					</div>
					<div class="pubilc ellipsis">{{movieDetail.src}}/{{movieDetail.pn | pn}}</div>
					<div class="pubilc ellipsis">{{movieDetail.pubDesc}}</div>
				</div>
			</div>
			<router-link class="m-detail-arrow" tag="div" :to="`/moviepage/${movieDetail.id}`">
				<span class="arrow-bg"></span>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			movieDetail: [Object,Array]
		},
		filters: {
			src(value) {
				if (value == null) {
					return
				}
				return value.replace('w.h', '170.230')
			},
			formatNumber(value) {
				if (value / 10000 >= 10000) {
					return (value / 10000).toFixed(1) + "亿人评"
				} else if (value / 1000 > 0) {
					return (value / 1000).toFixed(1) + "万人评"
				} else {
					return value + "人评"
				}
			},
			pn(value) {
				return (value + 10) + "分钟"
			}
		},
	}
</script>

<style lang="less" scoped>
	.movie-detail {
		margin-top: 96px;

		.m-detail {
			position: relative;
			height: 188px;
			overflow: hidden;
			cursor: pointer;

			.mask {
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				background-color: #333;
			}

			.m-bg {
				width: 100%;
				height: 100%;
				z-index: -1;
				overflow: hidden;
				position: absolute;
				-webkit-filter: blur(60px);
				filter: blur(60px);
				background-size: cover;
				background-repeat: no-repeat;
				opacity: .55;
			}

			.detail {
				display: flex;
				padding: 19px 30px 19px 15px;
				height: 150px;

				.poster {
					width: 110px;
					height: 150px;
					background: url('../assets/img/bg.fbcd24ee.png');
					background-size: 100% 100%;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.content {
					overflow-x: hidden;
					margin-left: 12.5px;
					color: #fff;

					.ellipsis {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.title {
						font-size: 20px;
						margin-top: 2px;
						font-weight: 700;
						line-height: 1;
					}

					.pubilc {
						margin-top: 8px;
						opacity: .8;
						font-size: 12px;
						line-height: 1;
					}

					.score {
						margin-top: 5px;
						line-height: 1;

						&>span {
							font-size: 18px;
							font-weight: 700;
							color: #fc0;
						}

						.snum {
							display: inline-block;
							margin-left: 5px;
							font-size: 12px;
							color: #fff;
							opacity: .8;
						}
					}

					.type {
						margin-top: 10px;
						opacity: .8;
						line-height: 1;
						display: flex;
						align-items: center;

						&>span {
							font-size: 12px;
						}

						.type-img {
							display: inline-block;
							margin-left: 5px;
							width: 42px;
							height: 13px;
							vertical-align: top;
							opacity: .85;

							.icon-bg {
								display: block;
								height: 100%;
							}

							.sd {
								width: 26px;
								background: url('../assets/img/下载%20(2).png');
								background-size: 100% 100%;
							}

							.imax {
								width: 26px;
								background: url('../assets/img/下载%20(1).png');
								background-size: 100% 100%;
							}
						}
					}
				}
			}

			.m-detail-arrow {
				position: absolute;
				width: 10px;
				height: 14.6px;
				right: 15px;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);

				.arrow-bg {
					display: block;
					width: 100%;
					height: 100%;
					background: url(../assets/img/arrow-right-black.png);
					background-size: cover;
				}
			}
		}
	}
</style>
